<template>
	<view>
		<view class="pl-16">
			<z-common-box v-if="myrank.rank_num" padding="18px 0" radius="40rpx">
				<view class="text-center font-color-666 font-size-14">
					<text>我的排名</text>
					<text class="font-color-theme_title font-w-bold ml-6 mr-6">{{myrank.rank_num}}，</text>
					<text>抽签码数量</text>
					<text class="font-color-theme ml-6 font-w-bold">{{myrank.nums}}</text>
				</view>
			</z-common-box>
		</view>
		<view class="flex flex-dir-col align-center flex-js-center pa-16">
			<view class="flex flex-ai-center flex-js-sb font-size-12 mb-16" style="color: #979997;">
				<view class="zhanbi">排名</view>
				<view class="zhanbi2">用户</view>
				<view class="zhanbi1">抽签码数量</view>
			</view>
			<view v-for="(item,index) in list" :key="index" :class="index%2 == 0?'bg_jb':''" class="item_box flex flex-ai-center flex-js-sb font-size-13 font-color-theme_title">
				<view class="zhanbi">{{index + 1}}</view>
				<view class="zhanbi2 flex flex-ai-center">
					<image :src="$ossUrl + item.avatar" style="width: 24px;height: 24px;border-radius: 100%;"></image>
					<view>{{item.nickname}}</view>
				</view> 
				<view class="zhanbi1 font-color-theme">{{item.nums}}</view>
			</view>
			<u-empty v-if="!list.length"></u-empty>
		</view>
		<view class="plr-16">
			<z-common-box boxShadow marginTop="10rpx">
				<view class="flex flex-ai-center mb-12">
					<u-icon name="/static/img/icon/icon_cp.png" size="15"></u-icon>
					<view class="font-color-theme_title ml-10 font-size-16 font-w-bold">抽签码排行榜规则</view>
				</view>
				<u-parse style="color: #fff;" :content="handleLang(config.draw_code_rankrule)"></u-parse>
			</z-common-box>	
		</view>	
	</view>
</template>

<script>
	import { coderank } from "@/api/draw/index.js"
	import { mapState } from "vuex"
	export default {
		name:'Leaderboard',
		props:{
			form:{
				type:Object
			}
		},
		data(){
			return {
				list:[],
				myrank:{
					nums:0,
					rank_num:0
				}
			}
		},
		computed:{
			...mapState('config',{ 
				config(state){
					return state.info
				}
			})
		},
		methods:{
			getList(){
				coderank(this.form).then( res => {
					this.list = res.data.list
					if(res.data.myrank) this.myrank = res.data.myrank
				}).catch(err => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.zhanbi {
		width: 25%;
		text-align: center;
	}
	.zhanbi1 {
		width: 20%;
		text-align: center;
	}
	.zhanbi2 {
		width: 35%;
		text-align: center;
	}
	.item_box {
		width: 100%;
		height: 80rpx;
		border-radius: 8px 0px 0px 8px;
	}
	.bg_jb {
		background: linear-gradient(90deg, #91EDF3 0%, rgba(145,243,243,0) 100%);
	}
</style>